<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直播间问题采集工具</title>
    <!-- 引入Vue.js和相关库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入Element Plus UI库 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- 引入图标库 -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    
    <style>
        body {
            margin: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f7fa;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        
        .main-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .card-header {
            background-color: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #ebeef5;
            font-weight: 600;
            color: #303133;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        
        .status-online {
            background-color: #f0f9ff;
            color: #1890ff;
            border: 1px solid #d4edda;
        }
        
        .status-offline {
            background-color: #fff2e8;
            color: #fa8c16;
            border: 1px solid #f5c2c7;
        }
        
        .question-item {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            transition: background-color 0.3s;
        }
        
        .question-item:hover {
            background-color: #f8f9fa;
        }
        
        .question-item:last-child {
            border-bottom: none;
        }
        
        .question-content {
            font-size: 16px;
            color: #303133;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .question-meta {
            display: flex;
            justify-content: space-between;
            color: #909399;
            font-size: 12px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .stats-item {
            text-align: center;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .stats-number {
            font-size: 28px;
            font-weight: bold;
            color: #409eff;
        }
        
        .stats-label {
            color: #606266;
            margin-top: 8px;
        }
        
        .form-row {
            display: flex;
            gap: 15px;
            align-items: end;
            margin-bottom: 15px;
        }
        
        .form-row .el-form-item {
            flex: 1;
            margin-bottom: 0;
        }
        
        .question-list {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px;
            color: #909399;
        }
        
        .empty-state .el-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 页面头部 -->
        <div class="header">
            <h1>直播间问题采集工具</h1>
            <p>实时监听直播间评论，自动识别和收集观众问题</p>
        </div>

        <div class="main-container">
            <!-- 连接状态和基本信息 -->
            <div class="card">
                <div class="card-header">
                    <i class="el-icon-connection"></i> 连接状态
                </div>
                <div class="card-body">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <div class="status-indicator" :class="status.is_monitoring ? 'status-online' : 'status-offline'">
                                <span class="status-dot" :style="{
                                    width: '8px',
                                    height: '8px',
                                    borderRadius: '50%',
                                    backgroundColor: status.is_monitoring ? '#52c41a' : '#fa8c16'
                                }"></span>
                                {{ status.is_monitoring ? '监听中' : '未连接' }}
                            </div>
                            <div v-if="status.room_info" style="margin-top: 10px; color: #606266;">
                                <div><strong>直播间:</strong> {{ status.room_info.title }}</div>
                                <div><strong>主播:</strong> {{ status.room_info.anchor }}</div>
                                <div><strong>房间ID:</strong> {{ status.room_info.room_id }}</div>
                            </div>
                        </div>
                        
                        <!-- 统计信息 -->
                        <div class="stats-grid" style="min-width: 400px;">
                            <div class="stats-item">
                                <div class="stats-number">{{ status.queue_size || 0 }}</div>
                                <div class="stats-label">队列问题数</div>
                            </div>
                            <div class="stats-item">
                                <div class="stats-number">{{ status.webhook_stats?.total_sent || 0 }}</div>
                                <div class="stats-label">已发送</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 连接配置 -->
            <div class="card">
                <div class="card-header">
                    <i class="el-icon-setting"></i> 连接配置
                </div>
                <div class="card-body">
                    <el-form :model="config" label-width="120px">
                        <div class="form-row">
                            <el-form-item label="直播间ID/URL">
                                <el-input 
                                    v-model="config.room_id" 
                                    placeholder="请输入抖音直播间ID或完整URL"
                                    :disabled="status.is_monitoring"
                                    @blur="saveRoomConfig">
                                    <template #prepend>
                                        <i class="el-icon-video-camera"></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-button 
                                @click="saveRoomConfig"
                                :disabled="status.is_monitoring">
                                保存配置
                            </el-button>
                            <el-button 
                                type="primary" 
                                :loading="loading"
                                @click="toggleMonitoring"
                                :disabled="!config.room_id">
                                {{ status.is_monitoring ? '停止监听' : '开始监听' }}
                            </el-button>
                        </div>
                        <div style="margin-top: 10px; color: #909399; font-size: 12px;">
                            <div>支持格式：</div>
                            <div>• 完整URL: https://live.douyin.com/282622938056</div>
                            <div>• 房间ID: 282622938056</div>
                        </div>
                    </el-form>
                </div>
            </div>

            <!-- Webhook配置 -->
            <div class="card">
                <div class="card-header">
                    <i class="el-icon-connection"></i> Webhook配置
                </div>
                <div class="card-body">
                    <el-form :model="config" label-width="120px">
                        <el-form-item label="启用Webhook">
                            <el-switch v-model="config.webhook_enabled" @change="updateConfig"></el-switch>
                        </el-form-item>
                        <el-form-item label="回调地址" v-if="config.webhook_enabled">
                            <div class="form-row">
                                <el-input 
                                    v-model="config.webhook_url" 
                                    placeholder="https://your-domain.com/webhook"
                                    @blur="updateConfig">
                                    <template #prepend>
                                        <i class="el-icon-link"></i>
                                    </template>
                                </el-input>
                                <el-button @click="testWebhook" :loading="testingWebhook">
                                    测试连接
                                </el-button>
                            </div>
                        </el-form-item>
                        <el-form-item v-if="config.webhook_enabled && status.webhook_stats">
                            <div style="color: #606266; font-size: 14px;">
                                <div>发送成功: {{ status.webhook_stats.success_count }}</div>
                                <div>发送失败: {{ status.webhook_stats.failed_count }}</div>
                                <div v-if="status.webhook_stats.last_status">
                                    最后状态: {{ status.webhook_stats.last_status }}
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!-- 问题展示 -->
            <div class="card">
                <div class="card-header">
                    <i class="el-icon-chat-dot-round"></i> 实时问题列表
                    <span style="float: right; font-weight: normal; color: #909399;">
                        共 {{ questions.length }} 个问题
                    </span>
                </div>
                <div class="card-body" style="padding: 0;">
                    <div v-if="questions.length === 0" class="empty-state">
                        <i class="el-icon-chat-dot-round"></i>
                        <div>暂无问题</div>
                        <div style="font-size: 12px; margin-top: 8px;">
                            开始监听后，系统会自动识别以"??"结尾的评论作为问题
                        </div>
                    </div>
                    <div v-else class="question-list">
                        <div 
                            v-for="(question, index) in questions" 
                            :key="index" 
                            class="question-item">
                            <div class="question-content">
                                {{ question.question }}
                            </div>
                            <div class="question-meta">
                                <span>
                                    <i class="el-icon-user"></i> {{ question.user }}
                                </span>
                                <span>
                                    <i class="el-icon-time"></i> {{ question.timestamp }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
            data() {
                return {
                    // 应用状态
                    loading: false,
                    testingWebhook: false,
                    
                    // 系统状态
                    status: {
                        is_monitoring: false,
                        room_info: null,
                        queue_size: 0,
                        webhook_stats: null,
                        config: {}
                    },
                    
                    // 配置信息
                    config: {
                        room_id: '',
                        webhook_url: '',
                        webhook_enabled: false
                    },
                    
                    // 问题列表
                    questions: [],
                    
                    // 定时器
                    statusTimer: null,
                    questionsTimer: null
                };
            },
            
            mounted() {
                // 页面加载时获取初始状态
                this.loadStatus();
                this.loadConfig();
                this.loadQuestions();
                
                // 启动定时刷新
                this.startPolling();
            },
            
            beforeUnmount() {
                // 清理定时器
                this.stopPolling();
            },
            
            methods: {
                // 加载系统状态
                async loadStatus() {
                    try {
                        const response = await axios.get('/api/status');
                        this.status = response.data;
                    } catch (error) {
                        console.error('加载状态失败:', error);
                    }
                },
                
                // 加载配置
                async loadConfig() {
                    try {
                        const response = await axios.get('/api/config');
                        this.config = { ...this.config, ...response.data };
                        
                        // 同时加载直播间URL配置
                        const roomResponse = await axios.get('/api/room-url');
                        this.config.room_id = roomResponse.data.room_url || roomResponse.data.room_id || this.config.room_id;
                    } catch (error) {
                        console.error('加载配置失败:', error);
                    }
                },
                
                // 保存直播间配置
                async saveRoomConfig() {
                    if (!this.config.room_id.trim()) {
                        return;
                    }
                    
                    try {
                        const response = await axios.post('/api/room-url', {
                            room_url: this.config.room_id
                        });
                        
                        if (response.data.success) {
                            ElMessage.success('直播间配置已保存');
                        } else {
                            ElMessage.error('保存失败: ' + response.data.message);
                        }
                    } catch (error) {
                        ElMessage.error('配置保存失败: ' + (error.response?.data?.message || error.message));
                    }
                },
                
                // 加载问题列表
                async loadQuestions() {
                    try {
                        const response = await axios.get('/api/questions');
                        this.questions = response.data.questions.reverse(); // 最新的问题在前面
                    } catch (error) {
                        console.error('加载问题失败:', error);
                    }
                },
                
                // 切换监听状态
                async toggleMonitoring() {
                    if (!this.config.room_id.trim()) {
                        ElMessage.warning('请输入直播间ID或URL');
                        return;
                    }
                    
                    this.loading = true;
                    
                    try {
                        let response;
                        if (this.status.is_monitoring) {
                            // 停止监听
                            response = await axios.post('/api/stop');
                        } else {
                            // 开始监听
                            response = await axios.post('/api/start', {
                                room_id: this.config.room_id
                            });
                        }
                        
                        if (response.data.success) {
                            ElMessage.success(response.data.message);
                            await this.loadStatus();
                        } else {
                            ElMessage.error(response.data.message);
                        }
                    } catch (error) {
                        ElMessage.error('操作失败: ' + (error.response?.data?.message || error.message));
                    } finally {
                        this.loading = false;
                    }
                },
                
                // 更新配置
                async updateConfig() {
                    try {
                        const response = await axios.post('/api/config', this.config);
                        if (response.data.success) {
                            ElMessage.success('配置已保存');
                        }
                    } catch (error) {
                        ElMessage.error('配置保存失败: ' + (error.response?.data?.message || error.message));
                    }
                },
                
                // 测试Webhook
                async testWebhook() {
                    if (!this.config.webhook_url.trim()) {
                        ElMessage.warning('请输入Webhook地址');
                        return;
                    }
                    
                    this.testingWebhook = true;
                    
                    try {
                        const response = await axios.post('/api/test-webhook', {
                            webhook_url: this.config.webhook_url
                        });
                        
                        if (response.data.success) {
                            ElMessage.success('Webhook测试成功');
                        } else {
                            ElMessage.error('Webhook测试失败: ' + response.data.message);
                        }
                    } catch (error) {
                        ElMessage.error('测试失败: ' + (error.response?.data?.message || error.message));
                    } finally {
                        this.testingWebhook = false;
                    }
                },
                
                // 启动轮询
                startPolling() {
                    // 每2秒更新状态
                    this.statusTimer = setInterval(this.loadStatus, 2000);
                    // 每3秒更新问题列表
                    this.questionsTimer = setInterval(this.loadQuestions, 3000);
                },
                
                // 停止轮询
                stopPolling() {
                    if (this.statusTimer) {
                        clearInterval(this.statusTimer);
                        this.statusTimer = null;
                    }
                    if (this.questionsTimer) {
                        clearInterval(this.questionsTimer);
                        this.questionsTimer = null;
                    }
                }
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>